<template>
	<view class="newbox">
				<view class="pic">
					<image :src="item.picurl" mode="aspectFill"></image>
				</view>
				<view class="text"> 
					<view class="title"> {{item.title}}</view>
				<view class="info">
					<text>作者:{{item.author}}</text>
					<text>浏览量：{{item.hits}}</text>
				</view>
				<view class="info">
					<text>{{item.time}}</text>
				</view>
				</view>
	</view>
</template>

<script>
	export default {
		name:"newsbox",
		props:{
			item:{
				type:Object,
				default(){
					return{
						title:"组件标题默认测试",
						author:"张三",
						hits:668,
						picurl:"../../static/img/zuqiu002..webp",
						time:"2023-08-12"
						
					}
				}
			}
		},
		data() {
			return {
				 
			};
		}
	}
</script>

<style lang="less">
	.newbox{
		display: flex;
	.pic{
		width: 230rpx;
		height: 160rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
	.text{
		flex: 1;
		padding-left: 25rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.title{
			font-size: 38rpx;
			color: #333;
		        -webkit-line-clamp: 2; // 设置两行文字溢出
		        display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
		        -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
		        overflow: hidden; /** 隐藏超出的内容 **/

		}
		.info{
			font-size: 18rpx;
			color: #999;
			text{
				padding-right: 30rpx;
			}
		}
	}
	}
</style>